<template>
	<xn-form-container title="关键词上传" :width="400" :visible="visible" :destroy-on-close="true" @close="onClose">
		<a-row :gutter="24">
			<a-col :span="24">
				<a-spin :spinning="uploadLoading">
					<a-upload-dragger
						ref="uploadRef"
						:before-upload="handleBeforeUpload"
						v-model:file-list="fileList"
						:show-upload-list="true"
						:headers="headers"
						accept=".xlsx, .xls, .csv"
						:auto-upload="false"
						multiple
					>
						<p class="ant-upload-drag-icon">
							<inbox-outlined></inbox-outlined>
						</p>
						<p class="ant-upload-text">单击或拖动文件到此区域进行上传</p>
						<p class="ant-upload-hint">支持单个上传</p>
					</a-upload-dragger>
				</a-spin>
			</a-col>
			<a-col :span="24">
				<a-button type="link" @click="download">点击下载关键词上传模版</a-button>
			</a-col>
		</a-row>
		<template #footer>
			<a-button class="xn-mr8" @click="onClose">关闭</a-button>
			<a-button type="primary" @click="onSubmit" :loading="submitBtnLoading">保存</a-button>
		</template>
	</xn-form-container>
</template>
<script setup>
import tool from '@/utils/tool'
import fileApi from "@/api/tjzy/file/fileApi";
import downloadUtil from "@/utils/downloadUtil";
import keyWordApi from "@/api/qc/keyword/keyWordApi";

const emit = defineEmits({successful: null})
const headers = ref({
	token: tool.data.get('TOKEN')
})
const visible = ref(false)
const uploadLoading = ref(false)
const submitBtnLoading = ref(false)
const fileList = ref([])
const uploadRef = ref()
const isShowCompany = ref(false)
// 打开抽屉
const openUpload = () => {
	visible.value = true
}
// 关闭抽屉
const onClose = () => {
	visible.value = false
	isShowCompany.value = false
	fileList.value = []
	emit('successful')
}

const handleBeforeUpload = () => {
	return false
}
const onSubmit = async () => {
	uploadLoading.value = true
	submitBtnLoading.value = true
	const fileData = new FormData()
	fileData.append('multipartFile', fileList.value[0].originFileObj)
	try {
		await keyWordApi.importKeyword(fileData)
	} finally {
		emit('successful')
		visible.value = false
		uploadLoading.value = false
		submitBtnLoading.value = false
	}
}

const download = () => {
	fileApi.download('关键词上传模版.xlsx').then(res => {
		downloadUtil.resultDownload(res)
	})
}

defineExpose({
	openUpload
})
</script>
<style scoped></style>
